<template>
  <div>
    <el-tabs v-model="activeName" @tab-change="handleClick">
      <el-tab-pane
        v-for="(item, index) in list"
        :key="index"
        :label="item.label"
        :name="item.value"
      />
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
interface TabItem {
  label: string
  value: number | string // 支持数字或字符串
}
const props = defineProps<{
  list: TabItem[]
  curStatus?: number | string
}>()
defineOptions({ name: 'OrderStatusMenu' })
const emit = defineEmits(['tabChange'])
const activeName = ref(props.list[0].value)

const handleClick = () => {
  emit('tabChange', activeName.value)
}
onMounted(() => {
  nextTick(() => {
    if (props.curStatus) {
      activeName.value = props.curStatus
    }
  })
})
</script>

<style lang="scss" scoped>
:deep(.el-tabs__item.is-active) {
  color: #3721ff;
}
:deep(.el-tabs__item:hover) {
  color: #3721ff;
}
:deep(.el-tabs__active-bar) {
  background-color: #3721ff;
}
</style>
